<!DOCTYPE html>
<html>
<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>客户详情</title>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
</head>
<body>
<div id="addCustomer" class="addCustomer mainPadding"
     style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>话务管理</el-breadcrumb-item>
        <el-breadcrumb-item>客户详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="borderbox">
        <div class="inforTitle">客户详情</div>
        <el-form :model="form" :rules="rules" ref="form" class="padding20">

            <div class="marginB20 fs16 paddingT20">资源信息 <span style="padding-left: 20px; color: red;">资源ID{{clueId}}</span>
                <el-button v-show="repeatStatus" type="primary" @click="repeatClueCustomers" style="margin-left: 10px;">重复资源信息</el-button>
            </div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                                label="资源类型：" :label-width="formLabelWidth">
                            <el-button
                                    type="text" disabled>{{clueBase.typeName}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col
                            :span="8">
                        <el-form-item label="资源类别："
                                      :label-width="formLabelWidth">
                            <el-button type="text"
                                       disabled>{{clueBase.categoryName}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!--<el-row>-->
                <!--<el-col :span="8">-->
                <!--<el-form-item-->
                <!--label="广告位：" :label-width="formLabelWidth">-->
                <!--<el-button-->
                <!--type="text" disabled>{{clueBase.sourceTypeName}}-->
                <!--</el-button>-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--<el-col-->
                <!--:span="8">-->
                <!--<el-form-item label="媒介："-->
                <!--:label-width="formLabelWidth">-->
                <!--<el-button type="text"-->
                <!--disabled>{{clueBase.sourceName}}-->
                <!--</el-button>-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                                label="搜索词：" :label-width="formLabelWidth">
                            <div class="lineFeed">{{clueBase.searchWord}}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="资源项目："
                                      :label-width="formLabelWidth">
                            <el-button type="text"
                                       disabled>{{clueBase.projectName}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item
                                label="留言时间：" :label-width="formLabelWidth">
                            <el-button
                                    type="text" disabled>{{clueBase.messageTime}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="留言重点："
                                      :label-width="formLabelWidth">
                            <div class="lineFeed lineFeed2">{{clueBase.messagePoint}}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col
                            :span="16">
                        <el-form-item label="意向项目：":label-width="formLabelWidth">
                            <el-button type="text" disabled>{{form.radioProject==1? form.insideProject:form.outsideProject}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

            <div class="marginB20 fs16 paddingT20">
                客户基本信息
            </div>
            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户姓名：" prop="customerName" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.customerName}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号：" prop="customerPhone" :label-width="formLabelWidth" >
                            <font color="red">{{form.customerPhone}}</font>
                            <span v-show="isShowPhoneButton" @click="dialogFormVisible = true" style="padding-left: 5px; color: rgb(0, 114, 255); cursor: pointer;">查看多个手机号</span>

                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户级别：" :label-width="formLabelWidth">
                            <el-button type="text" disabled>
                                {{form.customerLevel}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="邮箱：" prop="customerEmail" :label-width="formLabelWidth">
                            <el-button type="text" disabled>
                                {{form.customerEmail}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="性别：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>
                                {{form.customerSex==1?'男':form.customerSex==2?'女':''}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="8">-->
                    <!--<el-form-item label="微信：" :label-width="formLabelWidth" >-->
                    <!--<el-button type="text" disabled>{{form.ishasWx}}</el-button>-->
                    <!--<span v-show="vxShow" style="padding-left: 5px;color: rgb(0, 114, 255);cursor: pointer;" @click="dialogFormImg = true">查看二维码</span>-->
                    <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="8">
                        <el-form-item label="微信：" prop="wechat" :label-width="formLabelWidth">
                            <el-button type="text" disabled>{{form.wechat}}</el-button>
                            <span v-if="form.wechat2 || form.wechatUrl">
                                <span @click="openWechat" style="padding-left: 5px; color: rgb(0, 114, 255); cursor: pointer;">查看多个微信/二维码</span>
                            </span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="餐饮经验：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.experience}}</el-button>
                            <el-button type="text" disabled>{{form.cateringType}}</el-button>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="年龄：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.customerAge}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="职业：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.customerJob}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="合伙人：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.customerPartner}}</el-button>
                            <el-button type="text" disabled>{{form.customerPartnerDetail}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="开店紧迫性：" :label-width="formLabelWidth"  >
                            <el-button type="text" disabled>{{form.urgency}}</el-button>
                            <!--</el-input>--><span style="padding-left: 5px;" >之前启动</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="QQ：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.qq}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="选址情况：" :label-width="formLabelWidth">
                            <el-button type="text" disabled>{{form.address}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="出资人：" :label-width="formLabelWidth">
                            <el-button type="text" disabled>
                                {{form.sponsor==2?'他人 '+form.sponsorOther :(form.sponsor==1?'自己本人 ' :'')}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="决策人：" :label-width="formLabelWidth">
                            <el-button type="text" disabled>
                                {{form.decisionMaker==2?'他人 '+(form.decisionMakerOther==null?'':form.decisionMakerOther) :(form.decisionMaker==1?'自己本人 ':'')}}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">投资意向信息</div>

            <div class="borderbox padding20">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="投资金额：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.money}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="店面大小：" :label-width="formLabelWidth" >
                            <el-button type="text" disabled>{{form.area}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="开店区域：" :label-width="formLabelWidth" style="width: 33.3%;float: left;" >
                            <el-button type="text" disabled>{{form.province}}{{form.city}}{{form.district}}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="marginB20 fs16 paddingT20">上传资料</div>
            <el-row>
                <el-table ref="multipleTable" :data="tableDataC1"
                          tooltip-effect="dark" style="width: 100%"
                          border
                          @selection-change="handleFileSelectionChange">
                    <el-table-column
                            type="index" label="序号"
                            header-align="center" align="center" width="100">
                    </el-table-column>
                    <el-table-column prop="uploadUserName" label="上传人姓名" align="center">
                    </el-table-column>
                    <el-table-column prop="uploadTime" label="上传时间" align="center">
                    </el-table-column>
                    <el-table-column prop="fileName" label="文件名称" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="handleOperateFn(scope.$index, scope.row)">
                                <!-- {{scope.row.fileType =="mp3"? '下载录音':'查看图片'}} -->
                                {{scope.row.fileType !=="jpg" && scope.row.fileType !=="png" && scope.row.fileType !=="jpeg" && scope.row.fileType !=="gif" && scope.row.fileType !=="bmp"? '下载录音':'查看图片'}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="delStatus"
                                     label="删除状态" align="center">
                        <template
                                slot-scope="scope">
                            <div v-if="scope.row.delStatus === 0">未删除</div>
                            <div v-else-if="scope.row.delStatus ===1">已删除</div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div class="marginB20 fs16 paddingT20">跟进记录</div>
            <el-row>
                <el-table ref="multipleTable" :data="tableDataC2"
                          tooltip-effect="dark" style="width: 100%"
                          border
                          @selection-change="handleTrackingSelection">
                    <el-table-column
                            type="index" label="序号"
                            header-align="center" align="center" width="100">
                    </el-table-column>
                    <el-table-column prop="callTime" label="跟进时间" align="center">
                    </el-table-column>
                    <el-table-column prop="customerStatusName" label="客户状态"
                                     align="center"></el-table-column>
                    <el-table-column prop="isCall"
                                     label="是否接通" align="center">
                        <template
                                slot-scope="scope">
                            <div v-if="scope.row.isCall === 0">未接通</div>
                            <div v-else-if="scope.row.isCall ===1">接通/微信沟通</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="focusPoint" label="客户关注点" align="center"></el-table-column>
                    <!--<el-table-column-->
                    <!--prop="visitStatus" label="是否继续回访" align="center">-->
                    <!--<template-->
                    <!--slot-scope="scope">-->
                    <!--<div v-if="scope.row.visitStatus === 0">否</div>-->
                    <!--<div v-else-if="scope.row.visitStatus ===1">是</div>-->
                    <!--</template>-->
                    <!--</el-table-column>-->
                    <el-table-column prop="nextVisitTime" label="下次回访时间" align="center">
                    </el-table-column>
                    <el-table-column prop="createUserName" label="创建人" align="center">
                    </el-table-column>
                </el-table>
            </el-row>

            <div class="marginB20 fs16 paddingT20 callLogBox">
                通话记录
                <!-- 播放器 -->
                <audio id="audio" src="" controls="controls" autoplay="autoplay" controlsList="nodownload" oncontextmenu="return false" v-show="audioShow"></audio>
            </div>
            <el-row>
                <el-table ref="multipleTable" :data="tableDataC3"
                          tooltip-effect="dark" style="width: 100%"
                          border
                          @selection-change="handleSelectionChange">
                    <el-table-column type="index" width="55" label="序号" align="center">
                    </el-table-column>
                    <el-table-column prop="accountName" label="姓名" align="center">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色" align="center">
                    </el-table-column>
                    <el-table-column prop="callType" label="通话类型" align="center">
                    </el-table-column>
                    <el-table-column prop="startTime" label="拨打时间" :formatter="getStartTimeText" align="center">
                    </el-table-column>
                    <el-table-column prop="callStatus" label="接通情况" align="center">
                    </el-table-column>
                    <el-table-column prop="talkTime" label="接通时长" :formatter="getTalkTimeText" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope" v-if="scope.row.talkTime >0 ">
                            <!--<div style="float:left" :id="scope.row.id"-->
                            <!--class="sound-trigger sound-trigger&#45;&#45;type-default sound-trigger&#45;&#45;type-click"-->
                            <!--@click="switchSoundBtn(scope.row.id,scope.row.recordFile,scope.row.callSource)">-->
                            <!--<div class="sound-trigger__inner">-->
                            <!--<i class="fa fa-play fa-lg"></i>-->
                            <!--</div>-->
                            <!--</div>-->
                            <!--<el-button v-if="scope.row.accountId==loginUserId" type="danger" size="small"-->
                            <!--@click="downloadAudio(scope.row.id,scope.row.recordFile,scope.row.callSource)"><i-->
                            <!--class="el-icon-download"></i>下载-->
                            <!--</el-button>-->
                            <a :id="scope.row.id"
                               class="sound-trigger sound-trigger--type-default sound-trigger--type-click"
                               @click="switchSoundBtn(scope.row.id,scope.row.recordFile,scope.row.callSource)">
                                 <span class="sound-trigger__inner">
                                       <i class="fa fa-play-1 fa-lg"></i>
                                </span>
                            </a>
                            <a class="download_img"  v-if="scope.row.accountId==loginUserId"
                               @click="downloadAudio(scope.row.id,scope.row.recordFile,scope.row.callSource)"></a>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <div class="marginB20 fs16 paddingT20">流转人员</div>
            <el-row>
                <el-table ref="multipleTable" :data="tableDataC4"
                          tooltip-effect="dark" style="width: 100%"
                          border
                          @selection-change="handleSelectionChange">
                    <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                    <el-table-column prop="roleName" label="角色" align="center"></el-table-column>
                    <el-table-column prop="orgName" label="所属组(组名)" align="center"></el-table-column>
                    <!--<el-table-column prop="userName" label="服务人员姓名" align="center">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="telRuleValue" label="分配规则（名称）" align="center">-->
                    <!--</el-table-column>-->
                    <el-table-column prop="createTime" label="开始服务时间" align="center">
                    </el-table-column>
                </el-table>
            </el-row>
        </el-form>
    </el-row>

    <!-- dialog -->
    <el-dialog title="查看手机号" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form" class="padding20">
            <el-form-item v-show="form.phone2!=null&&form.phone2!=''" label="手机号2：" :label-width="formLabelWidth"  >
                <el-button type="text" disabled>{{form.phone2}}</el-button>
            </el-form-item>
            <el-form-item   v-show="form.phone3!=null&&form.phone3!=''" label="手机号3：" :label-width="formLabelWidth"  >
                <el-button type="text" disabled>{{form.phone3}}</el-button>
            </el-form-item>
            <el-form-item  v-show="form.phone4!=null&&form.phone4!=''" label="手机号4：" :label-width="formLabelWidth"  >
                <el-button type="text" disabled>{{form.phone4}}</el-button>
            </el-form-item>
            <el-form-item  v-show="form.phone5!=null&&form.phone5!=''" label="手机号5：" :label-width="formLabelWidth"  >
                <el-button type="text" disabled>{{form.phone5}}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- dialog -->
    <el-dialog title="二维码" :visible.sync="dialogFormImg">
        <div class="padding20" style="text-align: center;">
            <img :src="showwchatcode" alt="" style="width: 250px; height: 250px;">
        </div>
    </el-dialog>
    <!-- 上传资源dialog -->
    <el-dialog title="查看图片" :visible.sync="dialogFormUploadImg"  width="1100px">
        <div class="padding20" style="text-align: center;">
            <img :src="dialogFormUploadImgSrc" alt="" max-width="1000px">
        </div>
    </el-dialog>

    <!-- dialog -->
    <el-dialog title="查看微信" :visible.sync="wechatVisible" width="540px">
        <template>
            <el-form :model="wechatForm" ref="wechatForm" >
                <el-form-item label="微信2：" :label-width="formLabelWidth1" >
                    <!--<el-input v-model="wechatForm.wechat2" placeholder="" maxLength="20" disabled style="width: 290px;"></el-input>-->
                    <el-button type="text" disabled style="color: #1e2746;">{{wechatForm.wechat2}}</el-button>
                </el-form-item>
                <el-form-item label="微信二维码" :label-width="formLabelWidth1" >
                    <img v-show="wechatForm.wechatUrl!=''" :src="wechatForm.wechatUrl" width="290px" style="border-radius:6px;">
                </el-form-item>
            </el-form>
        </template>
    </el-dialog>
    <el-dialog title="重复资源信息" :visible.sync="dialogFormVisible1" width="870px">
        <el-form :model="dialogForm" ref="dialogForm" class="marginB10 dialogForm" v-for="item in repeatClueList" height="600">
            <div class="fs16 redcolor marginB20">重复时间：{{formatTimeFn(item.discoverTime)}}</div>
            <div class="borderbox padding10">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户姓名：" :label-width="formLabelWidth">{{item.clueDTO.clueCustomer.cusName}}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号：" :label-width="formLabelWidth" >{{getPhones(item.clueDTO.clueCustomer)}}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="微信：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueCustomer.wechat}}<span @click="lookWechat(item.clueDTO.clueCustomer)" v-if="(item.clueDTO.clueCustomer.wechat2 !=null && item.clueDTO.clueCustomer.wechat2 !='')||(item.clueDTO.clueCustomer.wechatCode !=null && item.clueDTO.clueCustomer.wechatCode !='')" style="color: rgb(0, 114, 255); cursor: pointer;">查看更多</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueCustomer.email}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="QQ：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueCustomer.qq}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资源类型：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueBasic.typeName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="留言时间：" :label-width="formLabelWidth">
                            {{formatTimeFn(item.clueDTO.clueBasic.messageTime)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="资源类别：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueBasic.categoryName}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="搜索词：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueBasic.searchWord}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="留言重点：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueBasic.messagePoint}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="地域信息：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueIntention.address}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注：" :label-width="formLabelWidth">
                            {{item.clueDTO.clueBasic.remark}}
                        </el-form-item>
                    </el-col>
                </el-row>

            </div>
        </el-form>
    </el-dialog>
</div>
<link rel="stylesheet" href="/css/common/uploadStyle.css">
<style type="text/css">
    .lineFeed {
        width: 230px;
        word-break: break-all;
        word-wrap: break-word;
        color: #c0c4cc;
        cursor: not-allowed;
    }

    .lineFeed2 {
        width: 530px;
    }

    .paddingTB {
        padding: 4px 0px;
    }

    .paddingL55 {
        padding-left: 55px;
    }

    .el-form-item.lineInherit .el-form-item__content {
        line-height: inherit !important;
    }

    @media screen and (width: 1920px) {
        .paddingL55 .el-date-editor.el-input {
            width: 218px;
        }

        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner {
            width: 202px;
        }

        .paddingL55 div.el-form-item:last-child {
            width: 186px;
            text-align: center;
        }
    }

    @media screen and (width: 1190px) {
        .paddingL55 {
            line-height: 28px;
        }

        .paddingL55 .el-date-editor.el-input {
            width: 122px;
        }

        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner {
            width: 120px;
        }

        .el-form--inline .el-form-item {
            margin-right: 0 !important;
        }

        .paddingL55 div.el-form-item:last-child {
            width: 106px;
            text-align: center;
        }

        .paddingL55 .el-form-item__content {
            line-height: 29px;
        }
    }

    @media screen and (width: 1744px) {
        .paddingL55 {
            line-height: 28px;
        }

        .paddingL55 .el-date-editor.el-input {
            width: 184px;
        }

        /*.paddingL55 div.el-form-item:nth-of-type(2) { width: 100px; }*/
        .paddingL55 div.el-form-item, .paddingL55 .el-input--mini .el-input__inner {
            width: 202px;
        }

        .el-form--inline .el-form-item {
            margin-right: 0 !important;
        }

        .paddingL55 .el-input--mini .el-input {
            top: -3px;
        }

        .paddingL55 div.el-form-item:last-child {
            width: 146px;
            text-align: center;
        }
    }

    i.el-icon-phone-outline {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 20px;
        margin: 0 5px;
    }

    .telNumberIcon {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        position: absolute;
        right: 0;
        top: 13px;
    }

    .fa-play-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_play.png);
        background-repeat: no-repeat;
    }

    .fa-stop-1 {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_stop.png);
        background-repeat: no-repeat;
    }

    .download_img {
        width: 34px;
        height: 34px;
        display: inline-block;
        background-image: url(/images/icon_download.png);
        background-repeat: no-repeat;
    }

</style>

</body>
<script src="/js/common/download.js"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
    var clueId = [[${clueId}]];//资源ID
    var customer = [[${customer}]];//客户信息
    var base = [[${base}]];//资源基本信息
    var intention = [[${intention}]];//资源投资意向信息
    var proSelect = [[${proSelect}]];//项目
    var circulationList = [[${circulationList}]];//资源流转记录
    var trackingList = [[${trackingList}]];//跟访记录
    var isEdit = false;
    var clueFileList = [[${clueFileList}]];//上传文件
    var ossUrl = [[${ossUrl}]];
    var callRecord = [[${callRecord}]];//通话记录
    var loginUserId=[[${loginUserId}]];
    var repeatClueStatus=[[${repeatClueStatus}]];
    var repeatClueList =[[${repeatClueList}]];
    var repeatStatus =false;
    if(repeatClueStatus == 1 ){
        repeatStatus = true;
    }
    function crtTimeFtt(val, row) {
        if (val != null) {
            var date = new Date(val);

            var month = (date.getMonth() + 1);
            if(month<10){
                month = "0"+month;
            }
            return date.getFullYear()+''+(month) + '月';
        }
    }

    function crtTimeFtt1(val, row) {
        if (val != null) {
            var date = new Date(val);

            var month = (date.getMonth() + 1);
            if(month<10){
                month = "0"+month;
            }
            var day = date.getDate();
            if(day<10){
                day = "0"+day;
            }
            var hour = date.getHours();
            if(hour<10){
                hour = "0"+hour;
            }
            var minu = date.getMinutes();
            if(minu<10){
                minu = "0"+minu;
            }
            var mill = date.getSeconds();
            if(mill<10){
                mill = "0"+mill;
            }
            return date.getFullYear()+''+(month) + ''+day+' '+hour+":"+minu+":"+mill;
        }
    }

    var showwchatcode = '/images/errorIcon.jpg';
    var vxShow = false;
    var vform;
    if(customer==null){
        vform= {
            customerName:"",
            customerPhone:"",
            phone2:"",
            phone3:"",
            phone4:"",
            phone5:"",
            customerSex:"",
            wechat:"",
            wechat2:'',
            wechatUrl:'',
            experience:"",
            customerAge:"",
            customerJob:"",
            customerPartner:"",
            address:"",
            urgency:"",
            customerLevel:"",
            qq:"",
            money:"",
            area:"",
            intentionCategory:"",
            radioProject:"",
            insideProject:"",
            outsideProject:"",
            province:"",
            city:"",
            district:"",
            customerEmail:'', //邮箱
            cateringType: '',//曾经从事餐饮类型
            sponsor:'', //出资人
            sponsorOther:'',//其它出资人的姓名及联系方式
            decisionMaker: '',//决策人
            decisionMakerOther: '',//其它决策人的姓名及联系方式
            customerPartnerDetail: ''//合伙人姓名及联系方式
        };
    }else{

        for(var i = 0 ; i < proSelect.length ; i++){
            if( proSelect[i].id == intention.purInProject){
                intention.purInProject =  proSelect[i].projectName;
            }
        }

        vform={
            customerName:customer.cusName,
            customerPhone:customer.phone,
            phone2:customer.phone2,
            phone3:customer.phone3,
            phone4:customer.phone4,
            phone5:customer.phone5,
            customerSex:customer.sex,
            wechat:customer.wechat,
            wechat2:customer.wechat2,
            wechatUrl:customer.wechatCode,
            experience:customer.hasExperience,
            customerAge:customer.age,
            customerJob:customer.profession,
            customerPartner:customer.partnerType,
            address:customer.hasAddress,
            urgency:crtTimeFtt(customer.urgentDate),
            customerLevel:customer.cusLevel,
            qq:customer.qq,
            money:intention.advanceAmount,
            area:intention.area,
            intentionCategory:intention.purType,
            radioProject:intention.purProjectType,

            insideProject:intention.purInProject,
            outsideProject:intention.purOutProject,

            province:intention.province,
            city:intention.city,
            district:intention.district,
            customerEmail:customer.email, //邮箱
            cateringType: customer.experience,//曾经从事餐饮类型
            sponsor:customer.investors, //出资人
            sponsorOther:customer.investorsNamePhone,//其它出资人的姓名及联系方式
            decisionMaker: customer.decide,//决策人
            decisionMakerOther: customer.decideNamePhone,//其它决策人的姓名及联系方式
            customerPartnerDetail:customer.partnerNamePhone//合伙人姓名及联系方式
        }
        if(customer.wechatCode !=null && customer.wechatCode!=''){
            showwchatcode = customer.wechatCode;
            vxShow = true;
        }else{
            showwchatcode = "/images/errorIcon.jpg";
            vxShow = false;
        }
    }
    // if(vform.ishasWx!=null&&vform.ishasWx!=''){
    // }

    if(base==null){
        base={
            typeName:"",
            categoryName:"",
            sourceTypeName:"",
            sourceTypeName:"",
            searchWord:"",
            projectName:"",
            messageTime:"",
            messagePoint:""
        }
    }else{
        base.messageTime = crtTimeFtt1( base.messageTime)
    }

    var addCustomerVM = new Vue({
        el: '#addCustomer',
        data: function () {
            return {
                dialogFormVisible1: false,
                repeatClueList:repeatClueList,
                repeatStatus:repeatStatus,
                audioShow:false,
                isShowPhoneButton:false,
                wechatVisible: false,//查看微信号
                vxShow:vxShow,
                clueId:clueId,
                loginUserId:loginUserId,
                showwchatcode:showwchatcode,
                isShowTip: false,//是否显示释放公有池提示信息
                isShowBtn: false,//是否显示保留客户按钮
                radio: '1',
                radio1: '1',
                dialogFormUploadImg: false, //上传资源图片弹框
                dialogFormUploadImgSrc: '', //上传资源图片弹框
                insideProjectShow: true,//内部项目默认显示
                outsideProjectShow: false,//外部项目默认不显示
                dialogFormImg: false,
                substatus: false,
                dialogFormVisible: false,//新增手机号
                buttonType: 'A',//添加手机号按钮形式
                deleteShow: false,//删除新增手机号输入框
                form: vform,
                clueBase: base,
                categoryArr: [],
                typeArr: [],
                mediumArry: [],
                adsenseArr: [],
                CateringExperienceArr: [],
                occupationArr: [],
                partnerArr: [],
                optionAddressArr: [],
                customerLevelArr: [],
                IntentionalCategoryArr: [],
                ussmArr: [],
                StorefrontAreaArr: [],
                customerStatusSubArr: [],
                provinceArr: [],
                cityArr: [],
                districtArr: [],
                showTipInfo: '',
                proSelect: proSelect,
                wechatForm: {
                    wechat2:'',
                    wechatUrl:'',
                    fileList:[]
                },
                formLabelWidth: '120px',
                formLabelWidth1: '140px',
                rules: {
                    customerName: [
                        {required: true, message: '客户姓名不能为空', trigger: 'blur'}
                    ],
                    province: [
                        {required: true, message: '开店区域省份不能为空', trigger: 'blur'}
                    ],
                    city: [
                        {required: true, message: '开店区域城市不能为空', trigger: 'blur'}
                    ],
                    customerPhone: [],
                    customerEmail: {
                        validator: function (rule, value, callback) {
                            if (value && (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value) == false)) {
                                callback(new Error("请输入正确的邮箱格式"));
                            } else {
                                callback();
                            }
                            callback();
                        }, trigger: 'blur'
                    },
                    /*跟踪记录验证*/
                    callTime: [
                        {required: true, message: '请选择跟进时间', trigger: 'change'}
                    ],
                    focusPoint: [
                        {required: true, message: '请填写客户关注点', trigger: 'blur'}
                    ],
                    isCall: [
                        {required: true, message: '请选择是否接通', trigger: 'change'}
                    ],
                    resourceStatus: [
                        {required: true, message: '请选择资源是否有效', trigger: 'change'}
                    ],
                    nextVisitTime: [
                        {required: true, message: '请选择下次回访时间', trigger: 'change'}
                    ]
                },
                dynamicValidateForm: {//新增手机号弹窗数据
                    domains: [{
                        value: ''
                    }]
                },
                statusOptions: [{
                    value: '0',
                    label: '推广列表'
                }, {
                    value: '1',
                    label: '电销列表'
                }],
                optsex: [{
                    value: '1',
                    label: '男'
                }, {
                    value: '2',
                    label: '女'
                }],
                options1: [{
                    value: '0',
                    label: '电销组'
                }, {
                    value: '1',
                    label: '媒介'
                }],
                dialogForm: {
                    phoneNum: ''
                },
                dialogRules: {
                    phoneNum: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'}
                    ]
                },
                multipleSelection: [],//上传资料
                multipleTrackingSelection: [],
                multipleFileSelection: [],
                fileList: [],
                cusStatusArr: [],
                tableDataC1: clueFileList,//文件记录
                dialingTime: '',//跟进记录
                lineFormShow: false,
                formInline: {
                    id: '',
                    callTime: '',
                    customerStatus: '1',
                    isCall: '',
                    resourceStatus: '',
                    focusPoint: '',
                    visitStatus: '1',
                    nextVisitTime: '',
                    customerStatusSub: '',
                },
                tableDataC2: trackingList,//跟进记录
                tableDataC3: callRecord,  //通话记录
                tableDataC4: circulationList//流转记录
            }
        },
        methods: {
            getPhones(cus){
                var phones = '';
                phones = cus.phone;
                if(cus.phone2 != null && cus.phone2 != ''){
                    if(phones != ''){
                        phones = phones +","+cus.phone2;
                    }else {
                        phones = cus.phone2;
                    }
                }
                if(cus.phone3 != null && cus.phone3 != ''){
                    if(phones != ''){
                        phones = phones +","+cus.phone3;
                    }else {
                        phones = cus.phone3;
                    }
                }
                if(cus.phone4 != null && cus.phone4 != ''){
                    if(phones != ''){
                        phones = phones +","+cus.phone4;
                    }else {
                        phones = cus.phone4;
                    }
                }
                if(cus.phone4 != null && cus.phone5 != ''){
                    if(phones != ''){
                        phones = phones +","+cus.phone5;
                    }else {
                        phones = cus.phone5;
                    }
                }
                return phones;
            },
            repeatClueCustomers(){
                addCustomerVM.dialogFormVisible1 =true;
            },
            gettelNumberIcon(tel) {
                //外呼手机
                var param = {};
                param.clueId = clueId;
                window.parent.parent.outboundCallPhone(tel, 2, clueId, function (res) {
                    axios.post('/tele/clueMyCustomerInfo/updateCallTime', param).then(function (response) {
                    });
                });
            },
            formatTimeFn(date) {
                if(date==null){
                    return '';
                }
                var dateNew = new Date(date);
                var year = dateNew.getFullYear()
                var month = dateNew.getMonth() + 1
                var day = dateNew.getDate()
                var hour = dateNew.getHours()
                var minute = dateNew.getMinutes()
                var second = dateNew.getSeconds()
                return year + "-" + this.formatNumberFn(month) + "-" + this.formatNumberFn(day) + " " + this.formatNumberFn(hour) + ":" + this.formatNumberFn(minute) + ":" + this.formatNumberFn(second);
            },
            formatNumberFn(n) {
                n = n.toString()
                return n[1] ? n : '0' + n
            },
            customerStatusChange(selVal) {
                if (selVal == '3') {
                    this.substatus = true;
                } else {
                    this.substatus = false;
                }
            },
            submitForm(form) {
                var valid = true;
                this.$refs[form].validateField(["customerEmail", "callTime",
                    "focusPoint", "isCall", "resourceStatus", "nextVisitTime"], (error) => {
                    if (error) {
                        valid = false;
                    }
                });
                if (valid) {
                    //----客户基本信息---//
                    var clueCustomer = {};
                    //客户姓名
                    var customerName = this.form.customerName;
                    clueCustomer.cusName = customerName;
                    //手机号
                    var customerPhone = this.form.customerPhone;
                    clueCustomer.phone = customerPhone;
                    //性别
                    var customerSex = this.form.customerSex;
                    clueCustomer.sex = customerSex;
                    //微信
                    var ishasWx = this.form.ishasWx;
                    clueCustomer.wechat = ishasWx;
                    //餐饮经验
                    var experience = this.form.experience;
                    clueCustomer.hasExperience = experience;
                    //年龄
                    var customerAge = this.form.customerAge;
                    clueCustomer.age = customerAge;
                    //职业
                    var customerJob = this.form.customerJob;
                    clueCustomer.profession = customerJob;
                    //合伙人
                    var customerPartner = this.form.customerPartner;
                    clueCustomer.partnerType = customerPartner;
                    //选址情况
                    var address = this.form.address;
                    clueCustomer.hasAddress = address;
                    //开店紧迫性
                    var urgency = this.form.urgency;
                    clueCustomer.urgentDate = urgency;
                    //客户级别
                    var customerLevel = this.form.customerLevel;
                    clueCustomer.cusLevel = customerLevel;
                    //QQ
                    var qq = this.form.qq;
                    clueCustomer.qq = qq;
                    //email
                    var email = this.form.customerEmail;
                    clueCustomer.email = email;
                    //餐饮经验
                    var experience = this.form.cateringType;
                    clueCustomer.experience = experience;
                    //合伙人姓名电话
                    var partnerNamePhone = this.form.customerPartnerDetail;
                    clueCustomer.partnerNamePhone = partnerNamePhone;
                    //出资人
                    var investors = this.form.sponsor;
                    clueCustomer.investors = investors;
                    //出资人姓名电话
                    var investorsNamePhone = this.form.sponsorOther;
                    clueCustomer.investorsNamePhone = investorsNamePhone;
                    //决策人
                    var decide = this.form.decisionMaker;
                    clueCustomer.decide = decide;
                    //决策人姓名电话
                    var decideNamePhone = this.form.decisionMakerOther;
                    clueCustomer.decideNamePhone = decideNamePhone;
                    var phoneArr = this.dynamicValidateForm.domains;
                    if (phoneArr.length > 0) {
                        for (var i = 0; i < phoneArr.length; i++) {
                            if (i == 0) {
                                clueCustomer.phone2 = phoneArr[i].value;
                            }
                            if (i == 1) {
                                clueCustomer.phone3 = phoneArr[i].value;
                            }
                            if (i == 2) {
                                clueCustomer.phone4 = phoneArr[i].value;
                            }
                            if (i == 3) {
                                clueCustomer.phone5 = phoneArr[i].value;
                            }
                        }
                    }
                    //----投资意向---//
                    var clueIntention = {};
                    //投资金额
                    var money = this.form.money;
                    clueIntention.advanceAmount = money;
                    //店面大小
                    var area = this.form.area;
                    clueIntention.area = area;
                    //意向品类
                    var intentionCategory = this.form.intentionCategory;
                    clueIntention.purType = intentionCategory;
                    //意向项目
                    var radioProject = this.form.radioProject;
                    clueIntention.purProjectType = radioProject;
                    //意向内部项目
                    var insideProject = this.form.insideProject;
                    clueIntention.purInProject = insideProject;
                    //意向外部项目
                    var outsideProject = this.form.outsideProject;
                    clueIntention.purOutProject = outsideProject;
                    //省
                    var province = this.form.province;
                    clueIntention.province = province;
                    //市
                    var city = this.form.city;
                    clueIntention.city = city
                    //区县
                    var district = this.form.district;
                    clueIntention.district = district;
                    var clue = {};
                    clue.clueId = clueId;
                    clue.clueCustomer = clueCustomer;
                    clue.clueIntention = clueIntention;
                    axios.post('/tele/clueMyCustomerInfo/updateCustomerClue', clue)
                        .then(function (response) {
                            addCustomerVM.$message({
                                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                    window.location.href = "/phonetraffic/listPage";
                                }
                            });
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            },
            rebackClue() {
                window.location.href = "/phonetraffic/listPage";
            },
            submitDialogForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var domains = this.dynamicValidateForm.domains;
                        var customerPhone = this.form.customerPhone;
                        var ary = [];
                        console.log(domains)
                        for (var i = 0; i < domains.length; i++) {
                            // 判断弹框里的值是否与页面的手机号1重复
                            if (domains[i].value == customerPhone) {
                                this.$message({
                                    message: '请不要提交重复手机号',
                                    type: 'warning'
                                });
                                return;
                            }
                            // 判断输入框里4个值是否重复(判断对象数组的value是否有重复值)
                            ary.push(domains[i].value);//把输入的手机号放入一个数组
                            var s = ary.join(",") + ",";
                            console.log(ary)
                            for (var j = 0; j < ary.length; j++) {
                                console.log(ary[j])
                                if (ary[j] != "") {
                                    if (s.replace(ary[j] + ",", "").indexOf(ary[j] + ",") > -1) {
                                        this.$message({
                                            message: '请不要提交重复手机号',
                                            type: 'warning'
                                        });
                                        return;
                                    }
                                }

                            }
                            // 如果输入的是非数字
                            if (/^[0-9]*$/.test(domains[i].value) == false) {
                                this.$message({
                                    message: '请输入数字',
                                    type: 'warning'
                                });
                                return;
                            }

                        }
                        // 按钮变化
                        this.buttonType = 'B';
                        console.log('submit!!');
                        // 关闭弹窗
                        this.dialogFormVisible = false;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item);
                var itemLength = this.dynamicValidateForm.domains.length;
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
                if (itemLength == 2) {
                    // 删除按钮不显示
                    this.deleteShow = false;
                }
            },
            addDomain(item) {
                var itemLength = this.dynamicValidateForm.domains.length;
                if (itemLength < 4) {
                    this.dynamicValidateForm.domains.push({
                        value: '',
                        key: Date.now()
                    });
                } else {
                    this.$message({
                        message: '最多添加5个手机号',
                        type: 'warning'
                    });
                }
                if (itemLength > 0) {
                    // 显示删除按钮
                    this.deleteShow = true;
                }
            },
            clearDialog() {
                console.log('清空')

                // 1、数据清空
                var domains = this.dynamicValidateForm.domains
                for (var i = 0; i < domains.length; i++) {
                    domains[i].value = ""
                }
                // 2、重置表单
                this.$refs['dynamicValidateForm'].resetFields()
                // 3、关闭弹窗
                this.dialogFormVisible = false;
                // 4、按钮变化
                this.buttonType = 'A';
            },
            number() {
                this.form.customerPhone = this.form.customerPhone.replace(/[^\.\d]/g, '');
                this.form.customerPhone = this.form.customerPhone.replace('.', '');
            },
            phoneNumber() {
                var domains = this.dynamicValidateForm.domains;
                for (var i = 0; i < domains.length; i++) {
                    domains[i].value = domains[i].value.replace(/[^\.\d]/g, '');
                    domains[i].value = domains[i].value.replace('.', '');
                }
            },
            qqnumber() {
                this.form.qq = this.form.qq.replace(/[^\.\d]/g, '');
                this.form.qq = this.form.qq.replace('.', '');
            },
            agenumber() {
                this.form.customerAge = this.form.customerAge.replace(/[^\.\d]/g, '');
                this.form.customerAge = this.form.customerAge.replace('.', '');
            },
            // 单选切换
            projectChange() {
                if (this.form.radioProject == "1") {//内部项目
                    this.insideProjectShow = true;
                    this.outsideProjectShow = false;
                } else if (this.form.radioProject == "2") {//外部项目
                    this.insideProjectShow = false;
                    this.outsideProjectShow = true;
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleFileSelectionChange(val) {
                //上传资料
                this.multipleFileSelection = val;
            },
            handleTrackingSelection(val) {
                this.multipleTrackingSelection = val;
            },
            editRecord() {
                //编辑跟进记录
                var rows = this.multipleTrackingSelection;
                if (rows.length != 1) {
                    if (rows.length != 1) {
                        this.$message({
                            message: '请选择一条数据进行编辑',
                            type: 'warning'
                        });
                        return;
                    }
                }
                this.lineFormShow = true;
                this.formInline.id = rows[0].id;
                this.formInline.callTime = rows[0].callTime;
                this.formInline.customerStatus = rows[0].customerStatus;
                ;
                this.formInline.isCall = rows[0].isCall + "";
                this.formInline.resourceStatus = rows[0].resourceStatus + "";
                this.formInline.focusPoint = rows[0].focusPoint;
                this.formInline.visitStatus = rows[0].visitStatus + "";
                this.formInline.nextVisitTime = rows[0].nextVisitTime;
                isEdit = true;
            },
            onConfirmAdd(index, row) {
                this.$refs['LineRuleForm'].validate((valid) => {
                    if (valid) {
                        //start
                        //跟进记录保存
                        var param = {};
                        param.clueId = clueId;
                        var callTime = this.formInline.callTime;
                        if (typeof (callTime) == 'string') {
                            param.callTime = new Date(Date.parse(callTime.replace(/-/g, "/")));
                        } else {
                            param.callTime = this.formInline.callTime;
                        }

                        param.customerStatus = this.formInline.customerStatus;
                        param.isCall = this.formInline.isCall;
                        param.resourceStatus = this.formInline.resourceStatus;
                        param.focusPoint = this.formInline.focusPoint;
                        param.visitStatus = this.formInline.visitStatus;
                        var nextVisitTime = this.formInline.nextVisitTime;
                        if (typeof (nextVisitTime) == 'string') {
                            param.nextVisitTime = new Date(Date.parse(nextVisitTime.replace(/-/g, "/")));
                        } else {
                            param.nextVisitTime = this.formInline.nextVisitTime;
                        }
                        param.customerStatusSub = this.formInline.customerStatusSub;
                        param.stage = 1; // 新增时候指明当前跟进记录为话务
                        //如果是编辑跟进记录
                        if (isEdit) {
                            param.id = this.formInline.id;
                            axios.post('/tele/clueMyCustomerInfo/updateClueTracking', param)
                                .then(function (response) {
                                    addCustomerVM.$message({
                                        message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                            axios.post('/tele/clueMyCustomerInfo/findClueTracking', param)
                                                .then(function (response) {
                                                    isEdit = false;
                                                    addCustomerVM.tableDataC2 = response.data.data;
                                                });
                                        }
                                    });
                                });
                        } else {
                            //如果是新增跟进记录
                            axios.post('/tele/clueMyCustomerInfo/saveClueTracking', param)
                                .then(function (response) {
                                    addCustomerVM.$message({
                                        message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                            axios.post('/tele/clueMyCustomerInfo/findClueTracking', param)
                                                .then(function (response) {
                                                    addCustomerVM.tableDataC2 = response.data.data;
                                                });
                                        }
                                    });
                                });
                        }
                        //end
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

                //return ;
                /* //跟进记录保存
                var param={};
                param.clueId=clueId;
                var callTime=this.formInline.callTime;
                if(typeof(callTime)=='string'){
                     param.callTime=new Date(Date.parse(callTime.replace(/-/g, "/")));
                }else{
                    param.callTime=this.formInline.callTime;
                }

                param.customerStatus=this.formInline.customerStatus;
                param.isCall=this.formInline.isCall;
                param.resourceStatus=this.formInline.resourceStatus;
                param.focusPoint=this.formInline.focusPoint;
                param.visitStatus=this.formInline.visitStatus;
                var nextVisitTime=this.formInline.nextVisitTime;
                var callTime=this.formInline.callTime;
                if(typeof(nextVisitTime)=='string'){
                       param.nextVisitTime=new Date(Date.parse(nextVisitTime.replace(/-/g, "/")));
                }else{
                    param.nextVisitTime=this.formInline.nextVisitTime;
                }
                //如果是编辑跟进记录
                if( isEdit){
                    param.id=this.formInline.id;
                    axios.post('/tele/clueMyCustomerInfo/updateClueTracking',param)
                    .then(function (response) {
                        addCustomerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                          axios.post('/tele/clueMyCustomerInfo/findClueTracking',param)
                       .then(function (response) {
                           addCustomerVM.tableDataC2=response.data.data;
                        });
                     }});
                    });
                }else{
                    //如果是新增跟进记录
                    axios.post('/tele/clueMyCustomerInfo/saveClueTracking',param)
                    .then(function (response) {
                        addCustomerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
                          axios.post('/tele/clueMyCustomerInfo/findClueTracking',param)
                       .then(function (response) {
                            addCustomerVM.tableDataC2=response.data.data;
                        });
                     }});
                  });
                } */
            },
            deteleClueFile() {
                //删除上传文件
                var rows = this.multipleFileSelection;
                if (rows.length < 1) {
                    if (rows.length != 1) {
                        this.$message({
                            message: '请选择删除数据',
                            type: 'warning'
                        });
                        return;
                    }
                }
                this.$confirm('确定要删除上传文件？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                        ids.push(rows[i].id);
                    }
                    var param = {};
                    param.delIds = ids;
                    param.clueId = clueId;
                    axios.post('/tele/clueMyCustomerInfo/deleteClueFile', param)
                        .then(function (response) {
                            addCustomerVM.$message({
                                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                    axios.post('/tele/clueMyCustomerInfo/findClueFile', param)
                                        .then(function (response) {
                                            addCustomerVM.tableDataC1 = response.data.data;
                                        });

                                }
                            });
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            deteleTracking() {
                //删除跟进记录
                var rows = this.multipleTrackingSelection;
                if (rows.length < 1) {
                    if (rows.length != 1) {
                        this.$message({
                            message: '请选择删除数据',
                            type: 'warning'
                        });
                        return;
                    }
                }
                this.$confirm('确定要删除跟进记录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                        ids.push(rows[i].id);
                    }
                    var param = {};
                    param.idList = ids;
                    param.clueId = clueId;
                    axios.post('/tele/clueMyCustomerInfo/deleteClueTracking', param)
                        .then(function (response) {
                            addCustomerVM.$message({
                                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                                    axios.post('/tele/clueMyCustomerInfo/findClueTracking', param)
                                        .then(function (response) {
                                            addCustomerVM.tableDataC2 = response.data.data;
                                        });
                                }
                            });
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            currentProvince(selVal) {
                //动态获取城市
                var param = {};
                param.type = "1";
                param.name = selVal;
                axios.post('/area/sysregion/querySysRegionByParam', param).then(function (response) {
                    addCustomerVM.cityArr = response.data.data.data;
                });
            },
            currentCity(selVal) {
                //动态获取区县
                var param = {};
                param.type = "2";
                param.name = selVal;
                axios.post('/area/sysregion/querySysRegionByParam', param).then(function (response) {
                    addCustomerVM.districtArr = response.data.data.data;
                });
            },
            //邀约来访
            inviteCustomer(form) {
                var valid = true;
                this.$refs[form].validateField(["customerName", "province", "city"], (error) => {
                    if (error) {
                        valid = false;
                    }
                });
                if (valid) {
                    window.location.href = "/tele/clueMyCustomerInfo/inviteCustomer?clueId=" + clueId + "&cusName=" + this.form.customerName + "&cusPhone=" + this.form.customerPhone;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            },
            handleOperateFn(index, row) { //上传资源"查看图片,下载录音"
                // if (row.fileType == 'mp3') {
                if (row.fileType == 'mp3'|| row.fileType == 'mp4' || row.fileType == 'wav' || row.fileType == 'wma'|| row.fileType == '3gpp' || row.fileType == 'm4a' ||row.fileType == 'ape'|| row.fileType == 'midi' || row.fileType == 'amr'|| row.fileType == 'MP3'|| row.fileType == 'MP4' ||row.fileType == 'WAV' || row.fileType == 'WMA'|| row.fileType == '3GPP' || row.fileType == 'M4A' ||row.fileType == 'APE'|| row.fileType == 'MIDI' || row.fileType == 'AMR') {
                    var x = new XMLHttpRequest();
                    x.open("GET", row.filePath, true);
                    x.responseType = 'blob';
                    x.onload = function (e) {
                        download(x.response, row.fileName, "audio/mp3");
                    };
                    x.send();
                } else {
                    this.dialogFormUploadImgSrc = row.filePath;
                    this.dialogFormUploadImg = true;
                }
            },
            download1(data, strFileName, strMimeType) {
                download(data, strFileName, strMimeType);
            },
            handlePlay(index, row) { //通话记录播放btn
                $("audio").hide();
                console.log(index, row);
                var show = $(".el-icon-pause-svg:eq(" + index + ")").css("display");
                if ($(".el-icon-pause-svg:eq(" + index + ")").css("display") == 'none') {
                    $("button.playBtn:eq(" + index + ") i").remove();
                    $(".el-icon-pause-svg:eq(" + index + ")").css("display", "block");
                    $("audio").get(index).play();
                } else {
                    $("button.playBtn:eq(" + index + ")").append('<i class="el-icon-caret-right"></i>');
                    $(".el-icon-pause-svg:eq(" + index + ")").css("display", "none");
                    $("audio").get(index).pause();
                }
            },

            openWechat() {
                this.wechatVisible = true
                this.wechatForm.wechat2=this.form.wechat2;
                this.wechatForm.wechatUrl=this.form.wechatUrl;
            },

            handleDownload(index, row) { //通话记录下载btn
                console.log(index, row);
                $(".downloadMp3:eq(" + index + ") a").prop("download", "true");
                $(".downloadMp3:eq(" + index + ") a>p").trigger("click");
            },

            switchSoundBtn(id, url, callSource) {
                // this.audioShow=true;
                if (callSource == '2') {
                    // switchSound(id, url);
                    window.parent.open(url)
                    return;
                }
                if(callSource == '6'){
                    var httpUrl = url.replace("https","http");
                    var page = window.open();
                    var html = "<body style='background: #000;text-align: center;position: relative'><div style='position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top:-30px;'><audio src='"+httpUrl+"' controls='controls' autoplay></audio></div></body>";
                    page.document.write(html);
                    return;
                }
                var newWindow = window.open();
                var param = {};
                param.id = id;
                axios.post('/call/callRecord/getRecordFile', param)
                    .then(function (response) {
                        var data = response.data
                        if (data.code == '0') {
                            var url = data.data;
                            // switchSound(id, url);
                            newWindow.location.href = url; 
                        } else {
                            console.error(data);
                            myCallRecordVm.$message({message: data.msg, type: 'error'});
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    }).then(function () {
                });
            },
            downloadAudio(id, url, callSource) {
                if (callSource == '2') {
                    location.href = url;
                    return;
                }
                var param = {};
                param.id = id;
                axios.post('/call/callRecord/getRecordFile', param)
                    .then(function (response) {
                        var data = response.data;
                        if (data.code == '0') {
                            var url = data.data;
                            if (url) {
                                var fileName = url.split('?')[0];
                                var fileNameArr = fileName.split("/");
//                                download(url, fileNameArr[fileNameArr.length - 1]);
                                var x=new XMLHttpRequest();
                                x.open("GET", url, true);
                                x.responseType = 'blob';
                                x.onload=function(e){download(x.response, fileNameArr[fileNameArr.length-1], 'audio/\\*' ); }
                                x.send();
                            }

                        } else {
                            console.error(data);
                            addCustomerVM.$message({message: data.msg, type: 'error'});
                        }

                    })
                    .catch(function (error) {
                        console.log(error);
                    }).then(function () {
                });
            },
            getStartTimeText(row, column, value, index) {
                var valText = "";
                if (value) {
                    valText =  moment.unix(Number(value)).format("YYYY-MM-DD HH:mm:ss");
                }
                return valText;
            },
            getTalkTimeText(row, column, value, index) {
                var valText = "";
                if (value) {
                    valText = this.formatSeconds(value);
                }
                return valText;
            },

            formatSeconds(s) {
                var t = "";
                var min = Math.floor(s / 60) % 60;
                var sec = s % 60;

                if (min < 10) {
                    t += "0";
                }
                t += min + ":";
                if (sec < 10) {
                    t += "0";
                }
                t += sec;
                // t += sec.toFixed(2);
                return t;
            },

            keepCustomer() {
                //保留客户
                var param = {};
                param.clueId = clueId;
                axios.post('/tele/clueMyCustomerInfo/reserveClue', param)
                    .then(function (response) {
                        var resp = response.data.data;
                        if ("" == resp) {
                            addCustomerVM.$message({
                                message: '保留成功，继续努力',
                                type: 'success'
                            });
                        } else {
                            addCustomerVM.$message({
                                message: '当前客户不能保留',
                                type: 'warn'
                            });
                        }
                    });
            }
        },
        mounted() {
            document.getElementById('addCustomer').style.display = 'block';
            if (customer) {
                this.form.customerName = customer.cusName;
                this.form.customerPhone = customer.phone;
                this.form.customerSex = customer.sex == null ? "" : customer.sex + "";
                this.form.ishasWx = customer.wechat;
                this.form.experience = customer.hasExperience == null ? "" : customer.hasExperience + "";
                this.form.customerAge = customer.age;
                this.form.customerJob = customer.profession == null?"":customer.profession+"";
                this.form.customerPartner = customer.partnerType == null ? "" : customer.partnerType + "";
                this.form.address = customer.hasAddress == null ? "" : customer.hasAddress + "";
                this.form.urgency = crtTimeFtt(customer.urgentDate);
                this.form.customerLevel = customer.cusLevel == null ? "" : customer.cusLevel + "";
                this.form.qq = customer.qq;
                this.form.customerEmail = customer.email;
                this.form.cateringType = customer.experience;
                this.form.customerPartnerDetail = customer.partnerNamePhone;
                this.form.sponsor = customer.investors == null ? "" : customer.investors + "";
                this.form.sponsorOther = customer.investorsNamePhone;
                this.form.decisionMaker = customer.decide == null ? "" : customer.decide + "";
                this.form.decisionMakerOther = customer.decideNamePhone;
                var phoneArr = [];
                if (customer.phone2) {
                    var phone2 = {};
                    phone2.value = customer.phone2;
                    phoneArr.push(phone2);

                }
                if (customer.phone3) {
                    var phone3 = {};
                    phone3.value = customer.phone3;
                    phoneArr.push(phone3);

                }
                if (customer.phone4) {
                    var phone4 = {};
                    phone4.value = customer.phone4;
                    phoneArr.push(phone4);

                }
                if (customer.phone5) {
                    var phone5 = {};
                    phone5.value = customer.phone5;
                    phoneArr.push(phone5);
                }
                this.dynamicValidateForm.domains = phoneArr;
                if(customer.phone2||customer.phone3||customer.phone4||customer.phone5){
                    this.isShowPhoneButton = true;
                }
            }
            if (intention) {
                this.form.money = intention.advanceAmount == null ? "" : intention.advanceAmount + "";
                this.form.area = intention.area == null ? "" : intention.area + "";
                this.form.intentionCategory = intention.purType == null ? "" : intention.purType + "";
                this.form.radioProject = intention.purProjectType + "";
                this.form.insideProject = intention.purInProject == null ? "" : intention.purInProject + "";
                this.form.outsideProject = intention.purOutProject;
                this.form.province = intention.province;
                this.form.city = intention.city;
                this.form.district = intention.district;
                if (intention.purProjectType == 2) {
                    this.outsideProjectShow = true; //外部项目默认显示
                    this.insideProjectShow = false; //内部项目不默认显示
                }
            }

        },
        created() {
            //初始资源类别数据
            var  param={};
            param.groupCode="clueCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.categoryArr=response.data.data;


            });
            //初始化资源类型数据
            param={};
            param.groupCode="clueType";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.typeArr=response.data.data;
            });

            //初始化资源类型数据
            param={};
            param.groupCode="clueType";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.typeArr=response.data.data;
            });
            //初始化媒介
            param={};
            param.groupCode="medium";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.mediumArry=response.data.data;
            });
            //广告位
            param={};
            param.groupCode="adsense";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.adsenseArr=response.data.data;
            });

            //餐饮经验
            param={};
            param.groupCode="CateringExperience";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.CateringExperienceArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.CateringExperienceArr.length ; i++){
                    if(addCustomerVM.CateringExperienceArr[i].value==vform.experience){
                        vform.experience = addCustomerVM.CateringExperienceArr[i].name;
                    }
                }
            });
            //职业
            param={};
            param.groupCode="occupation";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.occupationArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.occupationArr.length ; i++){
                    if(addCustomerVM.occupationArr[i].value==vform.customerJob){
                        vform.customerJob = addCustomerVM.occupationArr[i].name;
                    }
                }
            });

            //合伙人
            param={};
            param.groupCode="partner";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.partnerArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.partnerArr.length ; i++){
                    if(addCustomerVM.partnerArr[i].value==vform.customerPartner){
                        vform.customerPartner = addCustomerVM.partnerArr[i].name;
                    }
                }
            });

            //选址情况
            param={};
            param.groupCode="optionAddress";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.optionAddressArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.optionAddressArr.length ; i++){
                    if(addCustomerVM.optionAddressArr[i].value==vform.address){
                        vform.address = addCustomerVM.optionAddressArr[i].name;
                    }
                }
            });
            param={};
            param.groupCode="customerLevel";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.customerLevelArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.customerLevelArr.length ; i++){
                    if(addCustomerVM.customerLevelArr[i].value==vform.customerLevel){
                        vform.customerLevel = addCustomerVM.customerLevelArr[i].name;
                    }
                }
            });
            //意向品类
            param={};
            param.groupCode="IntentionalCategory";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.IntentionalCategoryArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.IntentionalCategoryArr.length ; i++){
                    if(addCustomerVM.IntentionalCategoryArr[i].value==vform.intentionCategory){
                        vform.intentionCategory = addCustomerVM.IntentionalCategoryArr[i].name;
                    }
                }
            });
            //投资金额
            param={};
            param.groupCode="investmentAmount";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.ussmArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.ussmArr.length ; i++){
                    if(addCustomerVM.ussmArr[i].value==vform.money){
                        vform.money = addCustomerVM.ussmArr[i].name;
                    }
                }
            });
            //店面大小
            param={};
            param.groupCode="StorefrontArea";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.StorefrontAreaArr=response.data.data;
                for(var i = 0 ; i < addCustomerVM.StorefrontAreaArr.length ; i++){
                    if(addCustomerVM.StorefrontAreaArr[i].value==vform.area){
                        vform.area = addCustomerVM.StorefrontAreaArr[i].name;
                    }
                }
            });
            //客户状态
            param={};
            param.groupCode="customerStatus";
            axios.post('/dictionary/DictionaryItem/dicItemsByGroupCode',param).then(function (response) {
                addCustomerVM.cusStatusArr=response.data.data;
            });
            //获取省
            param={};
            param.type="0";
            axios.post('/area/sysregion/querySysRegionByParam',param).then(function (response) {
                addCustomerVM.provinceArr=response.data.data.data;
            });

        }
    })
</script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/lib/crypto1/crypto/crypto.js'}"></script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/lib/crypto1/hmac/hmac.js'}"></script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/lib/crypto1/sha1/sha1.js'}"></script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/lib/base64.js'}"></script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/plupload.full.min.js'}"></script>
<script type="text/javascript"
        th:src="@{'/js/custom/file_upload/file_upload.js'}"></script>

<script type="text/javascript"
        src="//agent-gateway-2.cticloud.cn/js/agent/v10/cti-link.js"></script>
<script th:src="@{/js/custom/call/md5.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/call/toolbar.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/toolbarIframe.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/timer.js?v=1.0.1}"></script>
<script th:src="@{/js/custom/call/rtCall.js?v=1.0.0}"></script>
<!-- 播放錄音 js -->
<!-- <script th:src="@{/js/custom/callrecord/simpleAudio.js?v=1.0.0}"></script> -->
<script th:src="@{/js/custom/callrecord/simpleAudio02.js?v=1.0.0}"></script>
<script th:src="@{/js/custom/callrecord/download.js?v=1.0.0}"></script>
<script type="text/javascript">

    function clueUploadFile() {
        var result = uploadFile();
        var param = {};
        param.clueId = clueId;
        param.filePath = result;
        param.stage = 1; // 话务阶段
        axios.post('/tele/clueMyCustomerInfo/uploadClueFile', param).then(function (response) {
            addCustomerVM.$message({
                message: '操作成功', type: 'success', duration: 2000, onClose: function () {
                    axios.post('/tele/clueMyCustomerInfo/findClueFile', param)
                        .then(function (response) {
                            addCustomerVM.tableDataC1 = response.data.data;
                            var ossfile = document.getElementById("ossfile");
                            ossfile.innerHTML = "";
                        });
                }
            });
        });
    }

</script>
</html>